<template>
	<view>
       <view class="header">
       	<view class="jiedana">待接单</view>
		<view class="dindanlistaba">
			<view class="ddnriong">
				<view class="ttlias">
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;">订单编号:202325698714568
					</view>
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;text-align: right;">
						2023-11-24 01:59:29</view>
				</view>
				<view class="huoyuns">
					<view class="hya">货运</view>
					<view style="font-size: 32rpx;margin-left: 10rpx;float: left; line-height: 44rpx;">小面·6米8</view>
				</view>
				<view class="zhuangxie">
					<view class="dinwx">
						<view class="z">装</view>
						<view class="shuru">
							<view style="font-size: 36rpx;">徐州软件园</view>
							<view>徐州软件园</view>
						</view>
					</view>
					<view class="dinwx">
						<view class="x">卸</view>
						<view class="shuru">
							<view style="font-size: 36rpx;">奎南铁路小区</view>
							<view>江苏省徐州市泉山区软件路6号向东100米</view>
						</view>
					</view>

				</view>


			</view>
		</view>
		<view class="dindanlistab">
			<view class="ddnriong">
				<view class="ttlias">
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;">货物信息
					</view>
					
				</view>
				<view class="ttliaas">
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;">货物名称
					</view>
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;text-align: right;">
						货物名称</view>
				</view>
				
				<view class="ttliaas">
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;">包装方式
					</view>
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;text-align: right;">
						捆扎</view>
				</view>
				<view class="ttliaas">
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;">重量（吨）
					</view>
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;text-align: right;">
						1</view>
				</view>
				<view class="ttliaas">
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;">重量（吨）
					</view>
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;text-align: right;">
						1</view>
				</view>
				<view class="ttliaas">
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;">体积（立方）
					</view>
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;text-align: right;">
						10</view>
				</view>
				<view class="ttliaas">
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;">备注
					</view>
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;text-align: right;">
						备注备注备注备注备注</view>
				</view>
			</view>
		</view>
		
		<view class="dindanlistaaab">
			<view class="ddnriong">
				<view class="ttlias">
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;">订单详情
					</view>
					
				</view>
				<view class="ttliaas">
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;">订单编号:
					</view>
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;text-align: right;">
						21463214561136511</view>
				</view>
				
				<view class="ttliaas">
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;">下单时间:
					</view>
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;text-align: right;">
						2023/11/10 08:00:00</view>
				</view>
				<view class="ttliaas">
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;">跟车人数:
					</view>
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;text-align: right;">
						1人</view>
				</view>
				<view class="ttlias" >
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;">联系电话:
					</view>
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;text-align: right;">
						15855689696</view>
				<view class="ttliaas">
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;">支付方式:
					</view>
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;text-align: right;">
						余额支付<image src="../../static/fhy.png" style="width: 30rpx;height: 30rpx;float: right;margin-top: 28rpx;"></image></view>
				</view>
				<view class="ttliaas">
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;">优惠券
					</view>
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;text-align: right; color: red;">
						-￥80<image src="../../static/fhy.png" style="width: 30rpx;height: 30rpx;float: right;margin-top: 28rpx;"></image></view>
				</view>
				<view class="ttliaas">
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;">实付金额：
					</view>
					<view style="float: left;width: 50%; font-size: 24rpx;line-height: 82rpx;text-align: right;">
						￥26.5</view>
				</view>
			</view>
		</view>
	</view>
        <view class="touxiang">
			<image src="../../static/logo.png" style="width: 116rpx; height: 116rpx;float: left;margin-left: 20rpx; margin-top: 26rpx; border-radius: 100rpx;"></image>
			<view class="namelista">
				<view style="width: 100%;height: 50rpx;margin-top: 30rpx;">
					<view style="float: left;">李师傅</view>
					<view  style="float: left; color: #FE7002;"> 7.0分</view>
				</view>
				<view style="width: 100%;height: 50rpx;margin-top: 30rpx;">
					<view style="float: left;">
						<image src="../../static/now.png" style="width: 30rpx; height: 40rpx;float: left;"></image>
					</view>
					<view  style="float: left; color: #777; font-size: 28rpx;"> 江苏省徐州市泉山区</view>
				</view>
				
			</view>
			<view class="tubshou">
				<image src="../../static/hot.png" style="width: 40rpx; height: 40rpx;float: left;margin-top: 30rpx; margin-left: 16rpx;"></image>
				<view style="width: 100%; height: 50rpx;float: left; margin-top: 15rpx;">收藏</view>
			</view>
			<view class="tubshou">
				<image src="/static/tel.png" style="width: 40rpx; height: 40rpx;float: left;margin-top: 30rpx; margin-left: 16rpx;"></image>
				<view style="width: 100%; height: 50rpx;float: left; margin-top: 15rpx;">联系</view>
			</view>
		</view>
		<view style="width: 100%; height:200rpx; float: left;">
			
		</view>
    </view>
	<view style="width: 100%; height: 124rpx; position: fixed;bottom: 0; background: #fff;">
		<view class="qxyuyue">取消订单</view>
	</view>
	</view>
</template>

<script>
</script>

<style>
	.header {
		width: 100%;
		height: 418rpx;
		height: 418rpx;
		background: linear-gradient(189deg, #0085FC 0%, #02A8FE 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
	}

	.jiedana {
		width: 100%;
		height: 50rpx;
		float: left;
		margin-top: 88rpx;
		text-align: center;
		line-height: 50rpx;
		color: #fff;

	}

	.xinxia {
		width: 90%;
		height: 150rpx;
		float: left;
		margin-left: 5%;
		margin-top: 20rpx;
	}

	.jiedanshifu {
		width: 60%;
		height: 100%;
		float: left;
	}

	.tablidna {
		width: 90%;
		height: 412rpx;
		float: left;
		margin-left: 5%;
		background: #fff;
		border-radius: 16rpx;
		margin-top: 10rpx;
	}

	.chelgu {
		width: 90%;
		height: 50rpx;
		float: left;
		margin-left: 5%;
		margin-top: 15rpx;
	}

	.tupdinw {
		width: 90%;
		height: 250rpx;
		float: left;
		margin-left: 5%;
		margin-top: 15rpx;
	}

	.dindanlistaba {
		width: 90%;
		height: 544rpx;
		float: left;
		margin-top: 30rpx;
		margin-left: 5%;
		border-radius: 16rpx;
		background: #FFFFFF;
	}
	.dindanlistab {
		width: 90%;
		height: 584rpx;
		float: left;
		margin-top: 30rpx;
		margin-left: 5%;
		border-radius: 16rpx;
		background: #FFFFFF;
	}
    .dindanlistaaab{
		width: 90%;
		height: 698rpx;
		float: left;
		margin-top: 30rpx;
		margin-left: 5%;
		border-radius: 16rpx;
		background: #FFFFFF;
	}
	.ddnriong {
		width: 90%;
		height: 100%;
		float: left;
		margin-left: 5%;
	}

	.ttlias {
		width: 100%;
		height: 82rpx;
		float: left;
		border-bottom: 1rpx solid#ccc;
	}
    .ttliaas {
    	width: 100%;
    	height: 82rpx;
    	float: left;
    }
	.huoyuns {
		width: 100%;
		height: 44rpx;
		float: left;
		margin-top: 30rpx;
	}

	.hya {
		width: 72rpx;
		height: 44rpx;
		border-radius: 10rpx;
		border: 1rpx solid #0085FC;
		text-align: center;
		line-height: 44rpx;
		color: #0085FC;
		font-size: 20rpx;
		float: left;
	}

	.zhuangxie {
		width: 100%;
		height: 304rpx;
		float: left;
		margin-top: 40rpx;
		border-radius: 10rpx;
	}

	.zhuangxiea {
		width: 100%;
		height: 414rpx;
		float: left;
		background: #fff;
		margin-top: 40rpx;
		border-radius: 10rpx;
	}

	.dinwx {
		width: 90%;
		height: 122rpx;
		float: left;
		margin-top: 32rpx;
		margin-left: 5%;
	}

	.z {
		width: 44rpx;
		height: 44rpx;
		float: left;
		margin-top: 22rpx;
		background: #0194fd;
		color: #fff;
		border-radius: 100rpx;
		text-align: center;
		line-height: 44rpx;
	}

	.x {
		width: 44rpx;
		height: 44rpx;
		float: left;
		margin-top: 22rpx;
		background: #FF902A;
		color: #fff;
		border-radius: 100rpx;
		text-align: center;
		line-height: 44rpx;
	}

	.shuru {
		width: 85%;
		height: 122rpx;
		border-radius: 10rpx;
		float: left;
		margin-left: 16rpx;
	}

	.shurk {
		width: 70%;
		height: 100%;
		float: left;
		margin-left: 16rpx;
	}

	.dizpu {
		width: 25%;
		height: 40rpx;
		float: left;
		border-left: 1rpx solid #ccc;
		margin-top: 40rpx;
		text-align: right;
		color: #777777;
	}

	.dzcylx {
		width: 176rpx;
		height: 52rpx;
		float: left;
		background: #F6F6F6;
		border-radius: 5rpx;
		margin-left: 5%;
		margin-top: 20rpx;
	}

	.dinwxaa {
		width: 90%;
		height: 122rpx;
		float: left;
		margin-left: 5%;
		margin-top: 32rpx;
		background: rgba(1, 149, 253, 0.05);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 1rpx solid #0195FD;
	}

	.dinwxaac {
		width: 90%;
		height: 122rpx;
		float: left;
		margin-left: 5%;
		margin-top: 32rpx;

		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;

	}

	.imsl {
		width: 32rpx;
		height: 32rpx;
		float: left;
		margin-top: 40rpx;
		margin-left: 25rpx;
	}

	.ykhg {
		width: 150rpx;
		height: 100%;
		float: left;
		margin-left: 20rpx;
		line-height: 122rpx;
		text-align: center;
	}

	.jgfy {
		width: 150rpx;
		height: 100%;
		float: right;
		margin-right: 20rpx;
		line-height: 122rpx;
		text-align: center;
	}

	.anyfh {
		width: 90%;
		height: 92rpx;
		float: left;
		margin-left: 5%;

	}

	.yongxhe {
		width: 70%;
		height: 100%;
		float: left;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		background: #0194fd;
		text-align: center;
		line-height: 92rpx;
		color: #fff;
	}

	.yuyue {
		width: 30%;
		height: 100%;
		float: left;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		background: #FF902A;
		text-align: center;
		line-height: 92rpx;
		color: #fff;
	}

	.mymone {
		width: 100%;
		height: 150rpx;
		float: left;
		background: #fff;

		.wdqb {
			width: 90%;
			height: 100%;
			float: left;
			margin-left: 5%;

			.title_mymone {
				width: 100%;
				height: 50rpx;
				line-height: 50rpx;
				border-bottom: 1rpx solid #ccc;
				float: left;
			}

			.yuemone {
				width: 100%;
				height: 150rpx;
				float: left;

				.litbs {
					width: 28%;
					height: 100%;
					float: left;
					margin-left: 4%;

				}
			}
		}

	}

	.bzhua {
		width: 100%;
		height: 108rpx;
		background: #F8F8F8;
		float: left;
	}

	.ckxq {
		width: 236rpx;
		height: 88rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 2rpx solid #0195FD;
		float: left;
		text-align: center;
		color: #0195FD;
		line-height: 88rpx;
		margin-top: 20rpx;

	}

	.ljqd {
		width: 324rpx;
		height: 88rpx;
		background: #0195FD;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		float: left;
		text-align: center;
		line-height: 88rpx;
		margin-top: 20rpx;
		color: #fff;
		margin-left: 20rpx;
	}
	.qxyuyue{
		width: 200rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 2rpx solid #DDDDDD;
		float: right;
		margin-right: 30rpx;
		margin-top: 30rpx;
		text-align: center;
		line-height: 76rpx;
	}
	.touxiang{
		width: 90%;
		height: 172rpx;
		float: left;
		background: #fff;
		border-radius: 10rpx;
		margin-left: 5%;
		margin-top: 20rpx;
	}
	.namelista{
		width: 300rpx;
		height: 100%;
		float: left;
		margin-left: 20rpx;
	}
	.tubshou{
		width: 80rpx;
		height: 100%;
		float: left;
		margin-left: 20rpx;
	}
</style>